<template>
  <div class="page">
    <el-container class="main-container">
      <el-header class="header" height="50px">
        <div class="tab">
          <div class="title"><h2>基于VPM的植被生产力分析评估系统</h2></div>
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            text-color="#fff"
            :default-active=this.activeIndex
            background-color="Transparent"
            router
            active-text-color="#16D229"
          >
            <el-menu-item index="/mainpage"
              ><i class="el-icon-house"></i>系统主界面</el-menu-item
            >
            <el-menu-item index="/analyse"
              ><i class="el-icon-data-line"></i>动态分析</el-menu-item
            >

            <!-- <el-menu-item index="/trend"
              ><i class="el-icon-s-data"></i>趋势分析与评价</el-menu-item
            > -->
            <el-menu-item index="/analog"
              ><i class="el-icon-receiving"></i>VPM模拟</el-menu-item
            >
            <el-menu-item index="/data"
              ><i class="el-icon-coin"></i>数据管理</el-menu-item
            >
          </el-menu>
        </div>
      </el-header>
      <!-- 子页面内容 -->
      <div class="main">
        <router-view></router-view>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Layout",
  components: {},
  data() {
    return {
      activeIndex:""
    };
  },
};
</script>

<style scoped>
.el-header {
  background-color: rgba(0, 0, 0, 0.1);
}
.el-menu-item {
  font-size: 16px;
  font-family: "华文琥珀";
  padding: 0;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid rgb(22, 210, 41);
}
.el-menu-item.is-active {
  color: rgb(22, 210, 41);
}
.tab {
  width: 100%;
  display: flex;
}
/* 菜单栏样式 */
.el-menu--horizontal {
  display: flex;
  width: 60%;
  justify-content: space-between !important; /* 左右两侧均匀分布 */
  align-items: center; /* 垂直居中 */
  border-bottom: none !important;
}
.el-menu--horizontal .el-menu-item:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0) !important;
}
/* 标题样式 */
.title {
  margin-right: 5%;
  margin-left: 10px;
  text-align: center;
  padding: 0 0px;
  line-height: 50px;
  font-family: "华文琥珀";
  font-style: italic;
  pointer-events: none; /* 防止标题干扰菜单操作 */
}
.title h2 {
  margin: 0;
  font-size: 26px;
  font-weight: normal;
  background: linear-gradient(45deg, #40db50, #fad0c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>